<template>
<view class="cardListBox">
    <view class="tabNav">
        <view class="tabItem" v-for="(item, index) in tabList" :key="index" @click="setTabName(item)" :style="{ color: tabIndex == item.tabCode ? defaultColor : null }">
            <view>{{ item.tabName }}</view>
            <view>({{ item.tabNum }})</view>
        </view>
    </view>
    <view v-if="tabIndex == 'ticket'">
        <view class="ticketList" v-if="ticketsList && ticketsList.length != 0">
            <view class="ticketItem" v-for="(item, index) in ticketsList" :key="index" @click="toCouponDetail('ticket', item)" :style="{ backgroundImage: 'url(' + ticket_bg + ')' }">
				<!-- 快过期卡片样式 -->
				<!-- <image :src='quan_tags' class="quan-tags"></image> -->
                <view class="left">
                    <view v-if="item.couponTypeStr == '折扣券'">{{ item.couponAmount || "0" }}折</view>
                    <view v-else>￥{{ item.couponAmount || "-" }}</view>
                    <!-- <view>{{item.couponType == "1"? "服务费券": item.couponType == "2"? "电费券": "现金券" || "-"}}</view> -->
                    <!-- <view>{{item.couponTypeStr}}</view> -->
                    <view>{{item.applyStationType == "1"? "所有站点": item.applyStationType == "2"? "指定站点": "指定条件"}}</view>
                </view>
                <view class="right">
                    <view>
                        <!-- <view style="font-size: 34rpx; font-weight: 500">{{item.type == 1? "服务费券": item.type == 2? "电费券": "现金券"}}</view> -->
                        <view style="font-size: 34rpx; font-weight: 500">{{item.couponTypeStr}}</view>
                        <!-- <view style="font-size: 26rpx; display: flex" v-if="item.marketCouponOptionStations &&item.marketCouponOptionStations.length != 0">适用站点
                            <u-icon name="arrow-right" color="#606266" size="25"></u-icon>
                        </view> -->
                        <view style="font-size: 26rpx; display: flex">
                            <u-icon name="arrow-right" color="#606266" size="25"></u-icon>
                        </view>
                    </view>
                    <view>满￥{{ item.meetAmount }}可用</view>
                    <view>
                        <view>
                            <view>始</view>
                            <view> {{ item.receiveTime }}</view>
                        </view>
                        <view>
                            <view>止</view>
                            <view> {{ item.expireTime }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else>
            <Upgrading text="暂无数据"></Upgrading>
        </view>
    </view>
    <view v-if="tabIndex == 'card'">
        <view class="cardsList" v-if="cardsList && cardsList.length != 0">
            <view class="cardsItem" v-for="(item, index) in cardsList" :key="index" @click="toCouponDetail('card', item)" :style="{backgroundImage:'url(' + `${item.type == 1? card1_icon : card2_icon}` + ')'}">
                <view class="top">
                    <view class="left">
                        <view style="width: 300rpx;height: 42rpx;font-size: 34rpx;color: #4b2312;">{{item.type == 1? "电量卡": item.type == 2? "折扣卡": item.type == 3? "金额卡": "次数卡"}}</view>
                        <view>{{ item.restrictStr }} | {{ item.applyStationType == 1?'所有站点':item.applyStationType==2?'指定站点':'指定条件' }}</view>
                    </view>
                   <view class="right" v-if="item.type!=2">
                   	<view>{{ item.availableDegrees }}</view>
                   	<view>/{{ item.amount }}{{ item.type == 1?'度':item.type == 4?'次':'' }}</view>
                   </view>
				   <view class="right" v-if="item.type==2">
				   	<view>{{ item.amount}}</view>
				   	<view>折</view>
				   </view>
                </view>
                <view>
                    有效期：
                    <text>{{ item.fixedStartTime }}</text>至<text>{{ item.fixedEndTime }}</text>
                </view>
                <view v-if="item.type==2&&item.cardRestrictAmount" class="card-rest">
                    {{ item.availableDegrees }}/{{ item.cardRestrictAmount }}次
                </view>
                <!-- <view>{{item.applyStationType == 1? "所有站点": item.applyStationType == 2? "指定站点": "指定条件"}}</view> -->
            </view>
        </view>
        <view v-else>
            <Upgrading text="暂无数据"></Upgrading>
        </view>
    </view>
    <view v-if="tabIndex == 'equity'">
        <view class="quanyisList" v-if="equityList && equityList.length != 0">
            <view class="quanyiItem" v-for="(item, index) in equityList" :key="index" @click="toCouponDetail('equity', item)" :style="{ backgroundImage: 'url(' + quanyi1_icon + ')' }">
                <view class="quanyiItem_title">{{ item.equityName }}</view>
                <view v-if="item.totalNum">享受权益：{{ item.totalNum }}</view>
                <view>{{ item.equityEndTime }} 到期</view>
            </view>
        </view>
        <view v-else>
            <Upgrading text="暂无数据"></Upgrading>
        </view>
    </view>
    <view v-if="tabIndex == 'redemptionCode'">
        <view class="redemptionCodesList">
            <view class="redemptionCodeItem" v-for="(item, index) in quanyiList" :key="index" :style="{ backgroundImage: 'url(' + duihuanma1_icon + ')' }">
                <view>{{ item.name2 }}</view>
                <view>享受权益：{{ item.name3 }}</view>
                <view>{{ item.name4 }}</view>
            </view>
        </view>
    </view>
    <view class="bottom_button">
        <view @click="toHistory">历史卡券</view>
        <view @click="toCouponCenter" v-if="isOpenDev && !isSellerXc()">券码中心</view>
    </view>
</view>
</template>

<script>

import Upgrading from "@/components/upgrading/upgrading";
import {
    getCardList,
    getCouponCenterLists,
    getEquityList
} from "@/api/marketing/coupon";
const app = getApp();
export default {
    components: {
        Upgrading,
    },
    data() {
        return {
            defaultColor: uni.getStorageSync("textColor") || uni.getStorageSync("defaultColor_Green"),
			quan_tags: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/quan-tags.png`,
            ticket_bg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg.png`,
			ticket_bg1: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg_1.png`,
            card1_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/card1_icon.png`,
            card2_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/card2_icon.png`,
            quanyi1_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/quanyi1.png`,
            duihuanma1_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/duihuanma1.png`,
            tabIndex: "ticket",
            tabList: [{
                    tabCode: "ticket",
                    tabName: "券",
                    tabNum: 0,
                },
                {
                    tabCode: "card",
                    tabName: "卡",
                    tabNum: 0,
                },
                {
                    tabCode: "equity",
                    tabName: "权益",
                    tabNum: 0,
                },
                {
                    tabCode: 'redemptionCode',
                    tabName: '兑换码',
                    tabNum: 0,
                },
            ],
            ticketsList: [],
            cardsList: [],
            equityList: [],
        };
    },
    onLoad() {
		let memberType = uni.getStorageSync('memberType')
		if(memberType != 2){
			memberType = 1
		}
		this.memberType = memberType
        this.getCouponsCenterList();
        this.getCardsList();
        this.getEquitysList();
    },
    methods: {
        getCardsList() {
            getCardList(this.memberType).then((res) => {
                // console.log("获取卡列表============================》", res);
                if (res.code == 200) {
                    this.cardsList = res.data || [];
                    this.tabList[1].tabNum = parseInt(res.data.length) || 0;
                }
            });
        },
        getEquitysList() {
            getEquityList(this.memberType).then((res) => {
                // console.log("获取权益列表============================》", res);
                if (res.code == 200) {
                    this.equityList = res.data || [];
                    this.tabList[2].tabNum = parseInt(res.data.length) || 0;
                }
            });
        },
        getCouponsCenterList() {
            getCouponCenterLists(this.memberType).then((res) => {
                // console.log("获取优惠券列表============================》", res);
                if (res.code == 200) {
                    this.ticketsList = (res && res.data) || [];
                    this.tabList[0].tabNum = parseInt(res.data.length) || 0;
                }
            });
        },
        toHistory() {
            uni.navigateTo({
                url: "./history",
            });
        },
        toCouponCenter() {
            uni.navigateTo({
                url: "../couponCenter/index",
            });
        },
        setTabName(row) {
            this.tabIndex = row.tabCode;
            if (row.tabCode == "ticket") {
                this.getCouponsCenterList();
            }
            if (row.tabCode == "card") {
                this.getCardsList();
            }
            if (row.tabCode == "equity") {
                this.getEquitysList();
            }
            if (row.tabCode == "redemptionCode") {}
        },
        toCouponDetail(val, row) {
            console.log(row);
            if (val == "ticket") {
				console.log(111111111)
                uni.navigateTo({
                    url: `./cardVoucherYxTicketDetail?id=${row.id}`,
                });
            }
            if (val == "card") {
                uni.navigateTo({
                    url: `./cardVoucherYxCardDetail?id=${row.id}`,
                });
            }
            if (val == "equity") {
                uni.navigateTo({
                    url: "./cardVoucherYxEquityDetail?id="+row.id,
                });
            }
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../../commin/commin.less";

page {
    background-color: #f5f7fa;
    padding-bottom: 120rpx;
}

.cardListBox {
    width: 100%;
    min-height: 100vh;
    background: #f5f7fa;
}

.tabNav {
    width: 100%;
    height: 90rpx;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    .tabItem {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        font-weight: 400;
        color: #909399;
    }
}

.ticketList,
.cardsList,
.quanyisList,
.redemptionCodesList {
    width: 94%;
    margin: 0rpx auto;
    padding-bottom: 50px;
	.quan-tags{
		position: absolute;
		top:0;
		left:0;
		width: 78rpx;
		height:33rpx;
	}

    .ticketItem {
        width: 100%;
        height: 246rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        background-size: 108% 120%;
        background-repeat: no-repeat;
        background-position: center;
        margin: 20rpx auto;
		position: relative;

        .left {
            width: 230rpx;
            height: 246rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            >view:nth-of-type(1) {
                font-size: 34rpx;
                font-weight: 400;
                color: #ffffff;
            }

            >view:nth-of-type(2) {
                margin: 10rpx auto;
                font-size: 30rpx;
                font-weight: 400;
                color: #ffffff;
            }

            >view:nth-of-type(3) {
                font-size: 24rpx;
                font-weight: 400;
                color: #ffffff;
            }
        }

        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 32rpx;
            box-sizing: border-box;

            >view:nth-of-type(1) {
                width: 100%;
                font-size: 34rpx;
                font-weight: 400;
                color: #303133;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }

            >view:nth-of-type(2) {
                width: 100%;
                margin: 20rpx 0;
                font-size: 26rpx;
                font-weight: 400;
                color: #606266;
            }

            >view:nth-of-type(3) {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                font-size: 24rpx;
                font-weight: 400;
                color: #909399;

                >view {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;

                    >view:nth-of-type(1) {
                        width: 24rpx;
                        height: 24rpx;
                        border-radius: 50%;
                        border: 1rpx solid #909399;
                        color: #909399;
                        font-size: 20rpx;
                        text-align: center;
                        line-height: 24rpx;
                    }

                    >view:nth-of-type(2) {
                        margin-left: 10rpx;
                    }
                }
            }
        }
    }
}

.bottom_button {
    width: 100%;
    height: 102rpx;
    background: #ffffff;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;

    >view {
        width: 100%;
        height: 100%;
        line-height: 102rpx;
        text-align: center;
        font-size: 34rpx;
        font-weight: 400;
        color: #303133;
    }

    >view:nth-of-type(1) {
        border-right: 1rpx solid #dcdfe6;
    }
}

.cardsItem {
    width: 100%;
    margin: 20rpx auto;
    background-size: 110% 130%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 40rpx;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 20rpx;

    .card-rest {
        display: flex;
        justify-content: flex-end;
        font-size: 28rpx !important;
    }

    .top {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        color: #4b2312;

        .left {
            >view:nth-of-type(1) {
                font-size: 34rpx;
                font-weight: 400;
                color: #4b2312;
            }

            >view:nth-of-type(2) {
                margin-top: 20rpx;
                font-size: 22rpx;
                width: 300rpx;
                height: 42rpx;
                text-align: left;
                line-height: 42rpx;
                color: rgba(94, 50, 30, 0.8);
                border-radius: 21rpx;
            }
        }

        .right {
            width: 350rpx;
            height: 80rpx;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: flex-end;

            >view {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                align-items: flex-end;
            }

            >view:nth-of-type(1) {
                height: 80rpx;
                font-size: 48rpx;
                font-weight: bold;
            }

            >view:nth-of-type(2) {
                height: 80rpx;
                font-size: 32rpx;
            }
        }
    }

    >view:nth-of-type(2) {
        width: 100%;
        margin-top: 16rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #5e321e;
    }

    >view:nth-of-type(3) {
        width: 100%;
        margin-top: 16rpx;
        font-size: 22rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #5e321e;
    }
}

.quanyiItem {
    width: 100%;
    height: 246rpx;
    margin: 20rpx auto;
    padding: 40rpx;
    box-sizing: border-box;
    background-size: 100% 102%;
    background-repeat: no-repeat;
    background-position: center;
	.quanyiItem_title{
		width:100%;
		overflow: hidden;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

    >view:nth-of-type(1) {
        font-size: 34rpx;
        font-weight: 400;
        line-height: 34rpx;
        color: rgba(212, 186, 162, 1);
    }

    >view:nth-of-type(2) {
        font-size: 26rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 26rpx;
        margin-top: 30rpx;
    }

    >view:nth-of-type(3) {
        margin-top: 50rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 24rpx;
    }
}

.redemptionCodeItem {
    width: 100%;
    height: 246rpx;
    margin: 20rpx auto;
    padding: 40rpx;
    box-sizing: border-box;
    background-size: 100% 102%;
    background-repeat: no-repeat;
    background-position: center;

    >view:nth-of-type(1) {
        font-size: 34rpx;
        font-weight: 400;
        color: #af5239;
    }

    >view:nth-of-type(2) {
        font-size: 26rpx;
        font-weight: 400;
        color: #af5239;
        margin-top: 30rpx;
    }

    >view:nth-of-type(3) {
        margin-top: 50rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #af5239;
    }
}
</style>
